import { ISchema } from "../packages/formily-react/src";
// import { PhoneOutlined, LockOutlined } from "@ant-design/icons";

export const PhoneInput: ISchema = {
  type: "object",
  "x-decorator": "FormItem",
  "x-component": "Space",
  properties: {
    phone: {
      type: "number", // 'string' | 'object' | 'array' | 'number' | string
      title: "手机号",
      required: true,
      description: "手机号",
      maxLength: 11,
      minLength: 11,
      "x-validator": [
        {
          triggerType: "onBlur",
          validator: (value: string) => /^1[3-9]\d{9}$/.test(value),
        },
      ],
      "x-component": "Input",
      "x-component-props": {
        // prefix: "{{icon('PhoneOutlined')}}",
        prefix: "手机号",
      },
    },
    verifyCode: {
      type: "number",
      title: "验证码",
      required: true,
      "x-component": "Input",
      // "x-component-props": {
      //   prefix: "{{icon('LockOutlined')}}",
      // },
      // "x-reactions": [
      //   {
      //     dependencies: [".phone#value", ".phone#valid"],
      //     fulfill: {
      //       state: {
      //         "component[1].readyPost": "{{$deps[0] && $deps[1]}}",
      //         "component[1].phoneNumber": "{{$deps[0]}}",
      //       },
      //     },
      //   },
      // ],
    },
  },
};
